<template>
    <el-dialog
            title="生成代码"
            :close-on-click-modal="false"
            :before-close="handleClose"
            :visible.sync="visible">
        <div style="margin: 20px 0">表【{{ this.tableComment}}】：{{ this.tableName}}
            <el-select v-model="moduleVal" placeholder="请选择"style="padding-left: 10px">
                <el-option
                        v-for="item in moduleOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                </el-option>
            </el-select>
        </div>
        <el-card>
            <span style="color:green;font-weight: bold">主页</span>
            <el-collapse style="padding: 5px 0px 0px 10px" name="Index">
                <el-collapse-item title="搜索字段">
                    <el-transfer
                            v-model="indexControl.searchValue"
                            :data="columnSource.searchColumns">
                    </el-transfer>
                </el-collapse-item>
                <el-collapse-item title="查询按钮">
                    <el-input v-model="indexControl.querySqlId" placeholder="请输入sql_id"></el-input>
                    <el-input v-model="indexControl.queryMethod" placeholder="请输入method"></el-input>
                </el-collapse-item>
                <el-collapse-item title="新增按钮">
                    是否显示：<el-switch
                            v-model="indexControl.addBtnShow"
                            active-color="#13ce66"
                            inactive-color="#ff4949">
                    </el-switch>
                    <el-input v-model="indexControl.addSqlId" v-if="indexControl.addBtnShow" placeholder="请输入sql_id"></el-input>
                    <el-input v-model="indexControl.addMethod" v-if="indexControl.addBtnShow" placeholder="请输入method"></el-input>
                </el-collapse-item>
                <el-collapse-item title="批量删除">
                    是否显示：<el-switch
                                    v-model="indexControl.batchDelBtnShow"
                                    active-color="#13ce66"
                                    inactive-color="#ff4949">
                            </el-switch>
                    <el-input v-model="indexControl.batchDelSqlId" v-if="indexControl.batchDelBtnShow" placeholder="请输入sql_id"></el-input>
                    <el-input v-model="indexControl.batchDelMethod" v-if="indexControl.batchDelBtnShow" placeholder="请输入method"></el-input>
                </el-collapse-item>

                <el-collapse-item title="列表字段">
                    是否分页：<el-switch
                                    v-model="indexControl.tablePaged"
                                    active-color="#13ce66"
                                    inactive-color="#ff4949">
                            </el-switch>
                    <el-transfer
                            v-model="indexControl.tableValue"
                            :data="columnSource.tableColumns">
                    </el-transfer>
                </el-collapse-item>
                <el-collapse-item title="行按钮">
                    <el-collapse-item title="查看" style="padding: 5px 0px 0px 10px">
                        是否显示：<el-switch
                                        v-model="indexControl.columnViewShow"
                                        active-color="#13ce66"
                                        inactive-color="#ff4949">
                                </el-switch>
                        <el-input v-model="indexControl.columnViewSqlId" v-if="indexControl.columnViewShow" placeholder="请输入sql_id"></el-input>
                        <el-input v-model="indexControl.columnViewMethod" v-if="indexControl.columnViewShow" placeholder="请输入method"></el-input>
                    </el-collapse-item>
                    <el-collapse-item title="编辑" style="padding: 5px 0px 0px 10px">
                        是否显示：<el-switch
                            v-model="indexControl.columnEditShow"
                            active-color="#13ce66"
                            inactive-color="#ff4949">
                    </el-switch>
                        <el-input v-model="indexControl.columnEditSqlId" v-if="indexControl.columnEditShow" placeholder="请输入sql_id"></el-input>
                        <el-input v-model="indexControl.columnEditMethod" v-if="indexControl.columnEditShow" placeholder="请输入method"></el-input>
                    </el-collapse-item>
                    <el-collapse-item title="删除" style="padding: 5px 0px 0px 10px">
                        是否显示：<el-switch
                            v-model="indexControl.columnDelShow"
                            active-color="#13ce66"
                            inactive-color="#ff4949">
                    </el-switch>
                        <el-input v-model="indexControl.columnDelSqlId" v-if="indexControl.columnDelShow" placeholder="请输入sql_id"></el-input>
                        <el-input v-model="indexControl.columnDelMethod" v-if="indexControl.columnDelShow" placeholder="请输入method"></el-input>
                    </el-collapse-item>
                </el-collapse-item>
            </el-collapse>
        </el-card>
        <el-card>
            <span style="color:greenyellow;font-weight: bold">弹窗</span>
            <el-collapse style="padding: 5px 0px 0px 10px" name="Dialog">
                <el-collapse-item title="表单字段">
                    <el-transfer
                            v-model="detailControl.formValue"
                            :data="columnSource.formColumns">
                    </el-transfer>
                </el-collapse-item>
            </el-collapse>
        </el-card>
        <span slot="footer" class="dialog-footer">
            <el-button @click="visible = false">取消</el-button>
            <el-button type="primary" @click="dataFormSubmit()" >确定</el-button>
        </span>
    </el-dialog>
</template>
<script>

    export default {
        data () {
            return {
                visible: false,
                tableName: '',
                tableComment: '',
                columns: '',
                columnSource: {
                    searchColumns: [],
                    tableColumns: [],
                    formColumns: []
                },
                indexControl: {
                    searchValue: [],
                    querySqlId: '',
                    queryMethod: '',
                    addBtnShow: 0,
                    addSqlId: '',
                    addMethod: '',
                    batchDelBtnShow: 0,
                    batchDelSqlId: '',
                    batchDelMethod: '',
                    tableValue: [],
                    tablePaged: 1,
                    columnViewShow: 0,
                    columnViewSqlId: '',
                    columnViewMethod: '',
                    columnEditShow: 0,
                    columnEditSqlId: '',
                    columnEditMethod: '',
                    columnDelShow: 0,
                    columnDelSqlId: '',
                    columnDelMethod: ''
                },
                detailControl: {
                    formValue: []
                },
                moduleOptions: [{
                    value: 'fi',
                    label: '财务'
                }, {
                    value: 'scm',
                    label: 'SCM'
                }],
                moduleVal: 'fi'
            }
        },
        methods: {
            init(tableName, tableComment, columns) {
                this.visible = true
                this.tableName = tableName
                this.tableComment = tableComment
                this.columns = JSON.parse(JSON.stringify(columns))
                console.info('columns --->',this.columns)
                this.indexControl.searchValue = []
                this.indexControl.tableValue = []
                this.detailControl.formValue = []
                this.columnSource.searchColumns = []
                this.columnSource.tableColumns = []
                this.columnSource.formColumns = []
                this.columns.forEach(item => {
                    this.columnSource.searchColumns.push({
                        key: item.columnName,
                        label: item.columnKey == 'PRI'? item.columnName : item.columnComment
                    })
                    this.columnSource.tableColumns.push({
                        key: item.columnName,
                        label: item.columnKey == 'PRI'? item.columnName : item.columnComment
                    })
                    this.columnSource.formColumns.push({
                        key: item.columnName,
                        label: item.columnKey == 'PRI'? item.columnName : item.columnComment
                    })
                })

            },
            dataFormSubmit () {
                console.info('this.indexControl======>', this.indexControl)
                console.info('this.detailControl======>', this.detailControl)

                this.$http({
                    url: '/sys/generator/genPageCode',
                    method: 'get',
                    responseType: 'blob',
                    params: {
                        'tableName': this.tableName,
                        'tableComment': this.tableComment,
                        'module': this.moduleVal,
                        'indexControl': encodeURIComponent(JSON.stringify(this.indexControl)),
                        'detailControl': encodeURIComponent(JSON.stringify(this.detailControl))
                    },
                    data: true
                }).then(({data}) => {
                    if (!data) {
                        this.$notify({
                            title: '出错了!',
                            type: 'error',
                            message: '下载失败',
                            duration: 5000
                        })
                        return
                    }
                    let url = window.URL.createObjectURL(new Blob([data]))
                    let link = document.createElement('a')
                    link.style.display = 'none'
                    link.href = url
                    link.setAttribute('download', this.tableName + '.zip')

                    document.body.appendChild(link)
                    link.click()
                })
            },
            handleClose() {
                this.visible = false
            }
        }
    }
</script>
